<template>
  <div>
    <template v-if="from === 'leader_extra'">
      <div class="extra_reviews" v-for="(item, index) in infoScole" :key="item.userId">
        <div class="more_leader" v-if="infoScole.length > 1">领导{{ index + 1 }}</div>
        <div :class="{ more_box: infoScole.length > 1 }">
          <template v-if="item.expression">
            <div class="box_title">承担急难险重任务、处理复杂问题、应对重大考验、防范重大风险的表现</div>
            <div class="box_content">
              {{ item.expression }}
            </div>
          </template>
          <template v-if="item.suggestion">
            <div class="box_title">领导点评</div>
            <div class="box_content">
              {{ item.suggestion }}
            </div>
          </template>
        </div>
      </div>
    </template>
    <template v-if="from === 'main_extra'">
      <div class="extra_reviews" v-for="(item, index) in infoScole" :key="item.userId">
        <div class="more_leader" v-if="infoScole.length > 1">领导{{ index + 1 }}</div>
        <div :class="{ more_box: infoScole.length > 1 }">
          <template v-if="item.expression">
            <div class="box_title">承担急难险重任务、处理复杂问题、应对重大考验、防范重大风险的表现</div>
            <div class="box_content">
              {{ item.expression }}
            </div>
          </template>
          <template v-if="item.suggestion">
            <div class="box_title">领导点评</div>
            <div class="box_content">
              {{ item.suggestion }}
            </div>
          </template>
        </div>
      </div>
    </template>
    <template v-if="from === 'add_scole'">
      <div class="scole_detail" v-for="(item, index) in infoScole" :key="item.calcScoreName + index">
        <div class="scole_name" :title="item.calcScoreName">{{ item.calcScoreName }}</div>
        <div class="scole_scole">{{ item.score }}</div>
      </div>
    </template>
    <template v-if="from === 'remark'">
      <div class="remark">
        <div class="admin" v-if="infoRemark.adminRemark">
          <div class="name">{{ infoRemark.adminRemarkInfo.userName }}：</div>
          <div class="content">{{ infoRemark.adminRemarkInfo.remark }}</div>
        </div>
        <div class="modify" v-if="infoRemark.modifyReason">
          <div class="name">{{ infoRemark.modifyReasonInfo.userName }}：</div>
          <div class="content">
            <span>{{ infoRemark.modifyReasonInfo.remark }}</span>
            <span>
              （由“{{ infoRemark.adminAssessRank | AssessRank }}”调整为“{{ infoRemark.orgAssessRank | AssessRank }}”）
            </span>
          </div>
        </div>
      </div>
    </template>
    <XnDialog custom-class="showFile" title="" :visible.sync="dialogVisible" @close="handleVideoClose">
      <video-player
        class="vjs-custom-skin vjs-big-play-centered"
        :options="playerOptions"
        ref="videoPlayer"></video-player>
    </XnDialog>
  </div>
</template>

<script>
import XnDialog from '@com/xnDialog.vue'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
  props: {
    rowInfo: {
      type: Array,
      default: () => [],
    },
    from: {
      type: String,
      default: '',
    },
    remarkInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: { XnDialog, videoPlayer },
  data() {
    return {
      infoScole: [],
      infoRemark: {},
      imgViewerOption: {
        navbar: false,
        title: false,
        toolbar: true,
        zIndex: 9999,
      },
      playerOptions: {
        language: 'zh-CN',
        aspectRatio: '16:9',
        fluid: true,
        sources: [
          {
            type: 'video/mp4',
            src: '',
          },
        ],
        autoplay: false,
        controls: true,
        // poster: "../../../src/static/img/poster.png"
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
      },
      dialogVisible: false,
    }
  },
  filters: {
    AssessRank(val) {
      switch (val) {
        case '1':
          return '好'
        case '2':
          return '较好'
        case '3':
          return '一般'
        case '4':
          return '较差'
        case '5':
          return '建议为好'
        default:
          break
      }
    },
  },
  watch: {
    rowInfo: {
      handler(news) {
        this.infoScole = news
      },
      deep: true,
      immediate: true,
    },
    remarkInfo: {
      handler(news) {
        this.infoRemark = news
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    inited(viewer) {
      this.$viewer = viewer
    },
    handleVideoClose() {
      if (!this.dialogVisible) return
      this.$refs.videoPlayer.player.pause()
      this.dialogVisible = false
    },
    preview(item, i) {
      if (['jpeg', 'png', 'jpg'].includes(item.fileType.toLowerCase())) {
        this.previewPic(i, item)
      } else if (['mp4', 'rmp4'].includes(item.fileType.toLowerCase())) {
        this.previewVid(item)
      } else if (['xlsx', 'xls', 'doc', 'docx', 'pdf'].includes(item.fileType.toLowerCase())) {
        this.previewFile(item)
      }
    },
    previewPic(i, item) {
      const ref = `viewer-${item.id}`
      this.$refs[ref][0].$viewer.show()
    },
    previewVid(item) {
      this.playerOptions.sources[0].src = item.sourcePath
      this.playerOptions.poster = item.sourcePath
      this.dialogVisible = true
    },
    previewFile(item) {
      const routeData = this.$router.resolve({
        name: 'PDF_PAGE',
        query: {
          url: item.thumbnailPath,
        },
      })
      window.open(routeData.href, '_blank')
    },
  },
}
</script>

<style lang="scss" scoped>
.extra_reviews {
  .box_title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
  }
  .box_content {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    &:last-child {
      margin-bottom: 10px;
    }
  }
  .more_leader {
    font-weight: 600;
    font-size: 16px;
    color: #333;
  }
  .more_box {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
  }
}
.scole_detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
  .scole_name {
    flex: 1;
    margin-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}
.remark {
  .name {
    font-weight: 600;
    margin: 5px 0;
    color: #333;
  }
  .content {
    color: #999;
    font-size: 13px;
  }
}
.fjp {
  cursor: pointer;
}
</style>
